<!--
 * @Author: qiankui
 * @Date: 2024-2-21 09:13:46
 * @LastEditors: qiankui
 * @LastEditTime: 2024-2-21 09:13:56
 * @FilePath: \accesscontrolui\src\views\xtpz\classes\index.vue
 * @Description:
-->
<template>

  <div class="page-container h-100">
    <div class="wrapperform m-b-16">
      <div class="searchbox">
        <el-form :inline="true" :model="searchForm" ref="ruleForm">
          <el-form-item label="班次名称" prop="name">
            <el-input class="inputEl" placeholder="请输入" v-model="searchForm.name" ></el-input>
          </el-form-item>
          <el-form-item class="BlankPlaceholder formOperationButtons" label=".">
            <el-button size="small" type="primary" @click="search">
              {{this.i18n.t("Query")}}
            </el-button>
            <el-button size="small" type="handle" @click="reset">
              {{this.i18n.t("Reset")}}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="table-container table-box globalDiv">
      <el-table @cell-click="cellClick" stripe height="calc(100vh - 300px)" :data="dataList.values" :header-cell-style="{ 'background-color': 'rgba(201, 215, 242, 1)' }">
        <el-table-column type="index" label="序号" width="100px" align="center"> </el-table-column>
        <el-table-column prop="name" label="班次名称" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="name" label="考勤时间">
          <template slot-scope="scope">
            <p>{{ scope.row.time0 + '~' + scope.row.time1}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="班次说明" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :title="scope.row.description">{{ scope.row.description }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="accountInfo.userName" label="创建人"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column prop="name" label="默认班次设置">
          <template slot-scope="scope" size="small" >
            <el-switch @change="defaultChange(scope.row)" v-loading="scope.row.loading" v-model="scope.row.isDefault" style="height: 26px;"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="操作">
          <template slot-scope="scope">
            <i class="icon icon-pencil-line" @click="handleEdit(scope.row)"></i>
            <i class="icon icon-trash" @click="handleDel(scope.row)"></i>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <div style="background: #fff;padding: 10px;">
      <!--添加-->
      <el-button size="mini" @click="handleAdd">
        <i class="iconfont-KUI icon-plus-circle"></i>
        {{this.i18n.t('New classes')}}
      </el-button>

      <el-pagination
          style="display: inline-block;float: right"
          small
          background
          :pager-count="5"
          @size-change="handleSizeChange"
          @current-change="handleRightCurrentChange"
          :current-page.sync="form.pageNumber"
          :page-size="form.pageSize"
          layout="sizes,total, prev, pager, next, jumper"
          :total="dataList.totalCount"
          :page-sizes="[10, 20, 50, 100]"
      ></el-pagination>
    </div>
    <Details v-if="detailsVisible" :detailsVisible.sync="detailsVisible" :handleType="handleType" :tableRow="tableRow" ref="detailsRef"></Details>
  </div>

</template>
<script>

import {workingscheduleDelete, workingscheduleGetlist, workingscheduleSetdefault} from "@/api/pcmj/bcgl";
import Details from "@/views/xtpz/classes/components/details.vue";

export default {
  name: "classes",
  props: {
    listType: {
      type: String,
      default: "free",
    },
  },

  components: {
    Details
  },
  data() {
    return {
      searchForm: {
        name: "",
      },
      dataList: {},
      form: {
        pageSize: 10,
        pageNum: 1,
      },
      detailsVisible:false,
      handleType:null,
      tableRow:{}
    };
  },
  methods: {
    cellClick(row, column, cell, event){
      console.log(row, column, cell, event);
    },
    // 删除时的回调
    handleDel(row){
      this.W.$myConfirm('warning', this.i18n.t('Are you sure you want to delete this flight'))
          .then(async () => {

            workingscheduleDelete(row.id).then(res => {
              if (res.code == 200) {
                this.search()
                // 删除成功
                this.W.$tips("success", this.i18n.t('Successfully deleted'));
              }
            })

            return

            let res = await deleteDocument({ id: row.id });
            if (res.code == 200) {
              // 删除成功
              this.W.$tips("success", this.i18n.t('Successfully deleted'));
              this.getTableData();
            }
          })
          .catch(() => {
          });
      // console.log(row);
      // this.tableRow=row
      // this.$refs.deleteRef.open()
    },
    // 编辑
    handleEdit(row){
      this.tableRow=row
      this.handleType="edit"
      this.detailsVisible=true
    },
    // 页码变化时
    handleRightCurrentChange(val) {
      this.form.pageNum = val;
      this.search()
    },
    // 每页显示的数量变化时
    handleSizeChange(val){
      this.form.pageSize = val
      this.search()
    },
    // 添加班次
    handleAdd(){
      this.handleType="add"
      this.detailsVisible=true
    },
    // 设置和取消默认班次
    workingscheduleSetdefault(params){
      // this.defaultLoading=true
      workingscheduleSetdefault(params).then(res => {
        if (res.code == 200) {
          // 更新父页面表格
          this.getList()
        }
      }).catch().finally(()=>{
        this.dataList.values.map(item=>{
          if (item.id==params.id){
            item.loading=false
          }
        })
        // setTimeout(()=>{
        //   this.defaultLoading=false
        // },600)

      })
    },
    defaultChange(row){
      console.log(row);
      row.loading = true
      this.workingscheduleSetdefault({
        isDefualt:row.isDefault,
        id:row.id,
      })
      // setTimeout(()=>{
      //   row.loading = false
      // },1000)

    },
    search(){
      this.getList()
      // this.$emit('on-search',this.searchForm.name)
    },
    reset(){
      this.searchForm.name=null
      this.search()
    },
    // 获取班次管理列表
    workingscheduleGetlist(params){
      workingscheduleGetlist(params).then(res => {
        if (res.code == 200) {
          this.dataList=res.data || []
          console.log('59',this.dataList);
          this.dataList.values.map(item=>{
            this.$set(item, 'loading', false)
          })
        }
      })
    },
    getList() {

      if (this.searchForm.name==''||this.searchForm.name==undefined){
        this.searchForm.name==null
      }

      var params={
        pageNumber:this.form.pageNum,
        pageSize:this.form.pageSize,
        name:this.searchForm.name
      }
      console.log(params);
      this.workingscheduleGetlist(params)
      // Object.assign(this.form, data);
    },
  },
  beforeDestroy() {

  },
  mounted(){
    this.getList()
  }
};
</script>

<style scoped lang="scss">

</style>
